<template>
    <div class="container-fluid">
        <div class="row mb-1">

            <div class="col-3">
                <el-select v-model="objs.state" clearable placeholder="是否通过">
                    <el-option label="通过" :value="1" />
                    <el-option label="未通过" :value="0" />
                    <el-option label="未审核" :value="2" />
                </el-select>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-table default-expand-all border ref="table" :data="tableData" style="width: 100%" height="65vh"
                    @sort-change="sortchange">
                    <el-table-column type="expand">
                        <template #default="props">
                            <div :style="{ padding: '0px 64px' }">

                                <div v-html="props.row.context" class="editor-content-view">

                                </div>
                                <pre>
                                    <code>{{ props.row.code }}</code>
                                </pre>
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column type="selection" width="55" />

                    <el-table-column sortable prop="ID" label="ID" width="120" />
                    <el-table-column prop="user.name" label="用户" width="120" />
                    <el-table-column prop="question.name" label="题目名称" />
                    <el-table-column prop="question.ID" label="题单ID" width="120" />
                    <el-table-column prop="top" label="是否置顶" width="120" />
                    <el-table-column sortable prop="state" label="是否通过" width="120">
                        <template #default="props">
                            <div>
                                {{ ['不通过', '通过', '未审核'][props.row.state] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column sortable prop="createdAt" label="提交时间" :formatter="(e) => TimeYH(e.createdAt)"
                        width="120" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button type="info" @click="
                                dialogVisible = true;
                            updatedata = scope.row;
                            ">
                                查看
                            </el-button>
                            <el-button type="danger" @click="del(scope.row.ID)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog width="80%" destroy-on-close title="查看" v-model="dialogVisible">
                    <el-row v-loading="loading">
                        <el-col :span="16">
                            <el-form :model="updatedata" label-width="85px" size="default">
                                <el-form-item label="ID:">
                                    {{ updatedata.ID }}
                                </el-form-item>
                                <el-form-item label="题目:">
                                    <el-link target="_blank"
                                        :href="`https://oj.hterobot.com/#/question/${updatedata.questionid}`">
                                        {{ updatedata.questionid }} - {{ updatedata.question?.name }}
                                    </el-link>
                                </el-form-item>
                                <el-form-item label="审核状态">
                                    <el-radio-group v-model="updatedata.state" class="ml-4">
                                        <el-radio :label="1">通过</el-radio>
                                        <el-radio :label="0" :disabled="!updatedata.examine">不通过</el-radio>
                                    </el-radio-group>
                                    <el-select v-model="updatedata.examine">
                                        <el-option label="思路需要完善" value="思路需要完善" />
                                        <el-option label="格式需要优化" value="格式需要优化" />
                                        <el-option label="内容与题解无关" value="内容与题解无关" />
                                        <el-option label="已有类似题解" value="已有类似题解" />
                                        <el-option label="题解原创性不足" value="题解原创性不足" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="重复题解检测:" label-width="120px">
                                    <div>
                                        思路： {{ updatedata.textrepeat ? '有' : '无' }}
                                    </div>
                                    <div>
                                        代码： {{ updatedata.coderepeat ? '有' : '无' }}
                                    </div>

                                </el-form-item>
                                <el-form-item label="是否置顶">
                                    <el-radio-group v-model="updatedata.top" class="ml-4">
                                        <el-radio :label="1">置顶</el-radio>
                                        <el-radio :label="0">不置顶</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="提交人：">
                                    <el-link :href="`/#/user?userid=${updatedata.userid}`">
                                        {{ updatedata.user?.name }}

                                    </el-link>
                                    题解贡献积分： {{ integral.find(e => e.type === '题解贡献')?.nums || 0 }}
                                </el-form-item>
                                <el-form-item label="题目题解通过数：" label-width="140px">
                                    {{ thistanledatacount }}
                                </el-form-item>
                                <el-form-item label="保存">
                                    <el-button @click="updateprompt(updatedata)">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="8" :style="{ maxHeight: '450px', overflow: 'scroll', borderLeft: '1px solid #000' }">
                            <div>已通过题解：</div>
                            <el-container class="user border-bottom"
                                :style="{ marginBottom: '24px', paddingBottom: '12px' }" v-for="(v, key) in thistanledata"
                                :key="key">
                                <el-main class="context">
                                    <header class="row">
                                        <div class="col username">
                                            {{ v.user?.name }}
                                        </div>
                                    </header>
                                    <div class="text-html">
                                        <div v-html="v.context" class="editor-content-view"></div>
                                    </div>
                                    <pre :class="'language-' + v.lang">
                                                <code v-text="v.code" />
                                            </pre>
                                    <div>
                                        <span v-text="TimeYH(v.createdAt)"></span>
                                    </div>
                                </el-main>
                            </el-container>
                        </el-col>
                    </el-row>

                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch } from "vue";

import {
    asyncselectusersolution,
    asyncdelusersolution,
    asynccreatedorupdateusersolution,
    Iobj,
    asyncgetintegral,
} from "../../../api/index";

import Studycodemodel from "../../../mysql_interface/studycodemodel";

import { ElMessage, ElMessageBox } from "element-plus";

import { TimeYH } from "../../../util/time";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import highlight from "highlight.js";
const p = defineProps<{ obj: Iobj<Studycodemodel.Iusersolution>, setcount: (n: number) => void, changeobj: (a: any) => void }>()



const dialogVisible = ref(false);


const tableData = ref<Studycodemodel.Iusersolution[]>([]);
const loading = ref(false)
const thistanledata = ref<Studycodemodel.Iusersolution[]>([]);
const thistanledatacount = ref(0);

const updatedata = ref<Studycodemodel.Iusersolution>({})




async function start() {
    const obj = {
        ...p.obj,
        ...objs,
    }
    const data = await asyncselectusersolution(obj);
    tableData.value = data.rows;
    p.setcount(data.count)
}


watch(() => updatedata.value?.questionid, e => {
    if (e) {
        asyncselectusersolution({
            questionid: e,
            state: 1
        }).then(e => {
            thistanledata.value = e.rows
            thistanledatacount.value = e.count
            nextTick(() => {
                highlight.highlightAll()
            })
        })

    }
})
const integral = ref<{ nums: number, type: Studycodemodel.Iintegral['type'] }[]>([])

watch(() => updatedata.value?.userid, e => {
    if (e) {
        asyncgetintegral({
            userid: e
        }).then(e => {
            integral.value = e
        })
    }
})


const table = ref()

onMounted(() => {
    start();
});

async function next1() {
    await start();
    const data = tableData.value[0]
    if (data) {
        updatedata.value = data
    } else {
        dialogVisible.value = false
    }
}


const objs = reactive<Iobj<Studycodemodel.Iusersolution>>({
    _order: 'ID',
    _sortable: "DESC",
    state: 2,
    pid: null
})

watch(p.obj, start)
watch(objs, start)

function del(ID: number) {
    ElMessageBox.confirm("确定要删除次测试点", "确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(async () => {
            await asyncdelusersolution({ ID });
            ElMessage.success("删除成功");
            start();
        })
        .catch((e: any) => {
            console.log(e);
        });
}
const store = useStore(Storekey)

function sortchange(row: { order: string; prop: any }) {
    const { prop } = row;
    if (row.order == "descending") {
        objs._order = prop;
        objs._sortable = "DESC"
    } else {
        objs._order = prop;
        objs._sortable = "ASC"
    }
}
async function updateprompt(row: Studycodemodel.Iusersolution) {
    loading.value = true
    await asynccreatedorupdateusersolution(row).then(() => {
        loading.value = false
        next1()
    }).catch(f => {
        ElMessage.error(f)
        loading.value = false
    })
}
</script>
